<template>
  <div class="h-full">
    <div class="h-full flex">
      <my-sider class="h-full" :sider="sider"/>

      <div class="w-full ">
        <div>
          <Button @click="()=>{addModal =true}" type="primary">添加部门</Button>
        </div>
        <my-table v-if="tableData" class=" h-full m-3" :listColumns="listColumns" :listData="tableData"/>
      </div>
    </div>
    <Modal
        v-model="showModal"
        title="部门详情"
        @on-ok=" ()=>{showModal=false}"
        @on-cancel="()=>{showModal=false}">
      <div v-if="showData" class="space-y-3">
        <div v-for="(item,idx) in Object.keys(showData)" :key="idx">
          <div v-if="mapping[item]!==undefined" class="p-3 bg-white shadow rounded-lg">
            <h3 class="text-xs border-b">
              {{ mapping[item] }}
            </h3>
            <p class="font-sans">
              {{ showData[item] }}
            </p>
          </div>
        </div>
        <my-table v-if="userData" style="max-height: 400px" :list-columns="userColumns" :list-data="userData"/>
      </div>
    </Modal>
    <Modal
        v-model="updateMoadl"
        title="部门修改详情"
        @on-ok=" ()=>{updatedDept();updateMoadl=false}"
        @on-cancel="()=>{updateMoadl=false}">
      <div v-if="updateShowData" class="space-y-3">
          <div class="p-3 bg-white shadow rounded-lg">
            <h3 class="text-xs border-b">
              部门名
            </h3>
            <p class="font-sans">
              <Input v-model="name" />
            </p>
        </div>
      </div>
    </Modal>
    <Modal
        v-model="addModal"
        title="部门增加详情"
        @on-ok=" ()=>{addDept()}"
        @on-cancel="()=>{addModal=false}">
      <div class="space-y-3">
        <div v-for="(item,idx) in newData" :key="idx+2323" class="p-3 bg-white shadow rounded-lg">
          <h3 class="text-xs border-b">
            {{ item.name }}
          </h3>
          <p class="font-sans">
            <Input v-model="item.value" />
          </p>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
import {getAll} from "../../api/agent/agent.js";
import MyTable from "@/components/Mytable.vue";
import MySider from "@/components/Mysider.vue";
import {getEmployeeByDeptId} from "@/api/employee/employee";
import {api} from "@/boot/axios";

export default {
  name: 'agentManagement',
  components: {
    MySider,
    MyTable
  },
  data() {
    return {
      addModal: false,
      newData:{
        dept_id:{name:'部门号',value:''},
        dept_name:{name:'部门名',value:''},
      },
      updateMoadl: false,
      updateShowData: null,
      showModal: false,
      showData: null,
      name:'',
      userData:[],
      userColumns:[
        {title: '工号', key: 'user_id'},
        {title: '姓名', key: 'name'},
        {title: '手机号', key: 'tel'},
        {title: '年龄', key: 'age'},
        {title: '地址', key: 'address'},
        {title: '性别', key: 'gender'},
      ],
      mapping:{
        "dept_id": "部门号",
        "name": "部门名",
        // "parent_id": "上级部门号",
        // "leader": "部门负责人",
        // "created_time": "创建时间",
        // "updated_time": "更新时间",
      },
      sider: [
        {name: '部门', pathName: 'agent', order: '1-1'}
      ],
      tableData: [],
      listColumns: [
        {title: '部门号', key: 'dept_id'},
        {title: '部门名', key: 'name'},
        {
          title: '操作', key: 'opration',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.showDetail(params.row)
                    // this.$router.push({path: '/agentManagement/agentDetail', query: {id: params.row.dept_id}})
                  }
                }
              }, '查看'),
              h('Button', {
                props: {
                  type: 'success',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑')
            ])
          }
        }
      ],

    }
  },
  created() {
    getAll().then(res => {
      let data = res.data
      this.tableData = data.data
    })
  },
  methods: {
    addDept(){
      let formData = new FormData()
      formData.append('dept_id',this.newData.dept_id.value)
      formData.append('name',this.newData.dept_name.value)
      api.post('/dept/add',formData).then(res=>{
        if(res.data.code === 200) {
          this.$Message.success('添加成功')
          this.newData = {
            dept_id:{name:'部门号',value:''},
            dept_name:{name:'部门名',value:''},
          }
        }else{
          this.$Message.error('添加失败')
        }
        //更新数据
        getAll().then(res => {
          let data = res.data
          this.tableData = data.data
        })
      })
    },

    showDetail(row) {
      getEmployeeByDeptId(row.dept_id).then(res => {
        let data = res.data.data
        this.userData = data
        this.showData = row
        this.showModal = true
      })
    },
    edit(row) {
      console.log(row)
      this.updateShowData = row
      this.name = row.name
      this.updateMoadl = true
    },
    updatedDept(){
      let formData = new FormData()
      formData.append('dept_id',+this.updateShowData.dept_id)
      formData.append('dept_name',this.name)
      api.post('/dept/update',formData).then(res=>{
        if(res.data.code === 200) {
          this.$Message.success('修改成功')
        }else{
          this.$Message.error('修改失败')
        }
        //更新数据
        getAll().then(res => {
          let data = res.data
          this.tableData = data.data
        })
      })
    }
  }
}
</script>
<style scoped>

</style>